<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div class="left_box">
      <div class="code_box">
        <ace-editor  style="width: 100%;height: 100%" :html-text-value="htmlStr" :ts-text-value="tsStr"></ace-editor>
      </div>
    </div>
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="startAnalysis" size="small">开始漫游</el-button>
          <el-button type="primary" @click="removeAnalysis" size="small">移除漫游</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import czmlPositions from "@/assets/data/czmlPositions.json"
import {loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import thirdPathRoam from "@/widgets/modelExample_cesium/common/pathRoam/thirdPathRoam";
import {onMounted, ref} from "vue";

import AceEditor from "@/components/aceEditor.vue";

const htmlStr=ref(`<template>
  <div style="width: 100%;height: 100%;display: flex">
    <div id="load4490_box">
      <div class="popup_box">
        <div class="inner_content_common">
          <el-button type="primary" @click="startAnalysis" size="small">开始漫游</el-button>
          <el-button type="primary" @click="removeAnalysis" size="small">移除漫游</el-button>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import {initMap} from "@/widgets/modelExample_cesium/common/initMap";
import czmlPositions from "@/assets/data/czmlPositions.json"
import {loadTdtLayer} from "@/widgets/modelExample_cesium/common/loadLayers";
import thirdPathRoam from "@/widgets/modelExample_cesium/common/pathRoam/thirdPathRoam";
import {onMounted, ref} from "vue";


const cViewer = ref();
let fpr:any=null;

onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
const startAnalysis = () => {
  loadTdtLayer(cViewer.value, 'c', false);
  fpr=new thirdPathRoam(cViewer.value);
  fpr.createCzmlPath(czmlPositions,true);
}
const removeAnalysis=()=>{
  fpr.removePathRoam();
}
<\/script>

<style lang="scss" scoped>

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>
`);
const tsStr=ref(`
import {
    CzmlDataSource,
    Cartesian3,
    LagrangePolynomialApproximation,
    Transforms,
    Matrix4,
    Matrix3
} from 'cesium'
// @ts-ignore
import model from '/public/otherModal/CesiumMilkTruck/CesiumMilkTruck.glb'
class thirdPathRoam {
    _viewer:any;
    _flyEntity:any;
    constructor(viewer:any) {
        this._viewer=viewer;
        this._flyEntity=null;
    }

    /**
     * 时间计算-返回时间T Z 格式
     * @param date  时间
     * @param  difference 差值  0 表示就是当前时间,单位分钟
     * toJson 时间比实际时间差8个小时
     */
    timeCalculation(difference: number = 0) {
        let date: any = new Date();
        if (difference !== 0) {
            date = new Date(new Date().getTime() + difference * 60 * 1000);
        }
        date.setMinutes(date.getMinutes() - date.getTimezoneOffset());
        date = date.toJSON()
        return date;
    }

    /**
     *
     * @param positions
     */
    async createCzmlPath(positions: any, isModel: boolean = true) {
        let _this = this;
        //开始运行的起始时间ISO格式
        let cTime = this.timeCalculation();
        let speed = 10;//倍数
        //运行的结束时间点的（个数*倍数）/60
        let aFterTime = this.timeCalculation((speed * positions.length) / 60);
        let cartographicDegrees: any = [];
        positions.forEach((item: any, index: number) => {
            cartographicDegrees.push(index * speed);
            cartographicDegrees.push(item[0]);
            cartographicDegrees.push(item[1]);
            cartographicDegrees.push(1000);
        })
        let czml = [
            {
                id: "document",//这个id固定的，是document对象的意思
                name: "CZML Path third",
                version: "1.0",
                clock: {
                    interval: \`${/cTime/}/${/aFterTime/}\`,
                    currentTime: cTime,
                    multiplier: speed,
                }
            }
        ]
        let mainJson: any = {
            "id": "path",
            "name": "path with GPS flight data",
            "description": "",
            "availability": \`${/cTime/}/${/aFterTime/}\`,
            "path": {
                "material": {
                    "polylineOutline": {
                        "color": {
                            "rgba": [255, 0, 255, 255],
                        },
                        "outlineColor": {
                            "rgba": [0, 255, 255, 255],
                        },
                        "outlineWidth": 5,
                    },
                },
                "width": 8,
                "leadTime": 10,
                "trailTime": 1000,
                "resolution": 5,
            },
            "orientation": {
                "velocityReference": "#position"
            },
            "position": {
                "epoch": cTime,
                "cartographicDegrees": cartographicDegrees
            }
        }
        if (!isModel) {
            Object.assign(mainJson, {
                billboard: {
                    image:
                        "",
                    scale: 1.5,
                    eyeOffset: {
                        cartesian: [0.0, 0.0, -10.0],
                    },
                }
            })
        } else {
            Object.assign(mainJson, {
                "model": {
                    "id": "run_model",
                    "gltf": model,
                    "minimumPixelSize": 100,
                    "maximumScale": 50
                },

                "viewFrom": {
                    "cartesian": [-2080, -1715, 779]
                }
            })
        }
        czml.push(mainJson);
        const dataSource = await _this._viewer.dataSources.add(
            CzmlDataSource.load(czml)
        );
        let flyEntity = dataSource.entities.getById("path");
        //主要是为了在拐弯的时候让运动更平滑
        flyEntity.position.setInterpolationOptions({
            interpolationDegree: 5,
            interpolationAlgorithm: LagrangePolynomialApproximation
        })
        this._viewer.trackedEntity = flyEntity
        // 让时间动起来
        _this._viewer.clock.shouldAnimate = true;
        _this._flyEntity=flyEntity;
    }


    removePathRoam(){
        this._viewer.clock.shouldAnimate = false;
        let dataSources=this._viewer.dataSources.getByName('CZML Path third');
        if(dataSources.length>0){
            this._viewer.dataSources.remove(dataSources[0])
        }
    }
}

export default thirdPathRoam;

`);

const cViewer = ref();
let fpr:any=null;

onMounted(() => {
  cViewer.value = initMap("load4490_box")
})
const startAnalysis = () => {
  loadTdtLayer(cViewer.value, 'c', false);
  fpr=new thirdPathRoam(cViewer.value);
  fpr.createCzmlPath(czmlPositions,true);
}
const removeAnalysis=()=>{
  fpr.removePathRoam();
}
</script>

<style lang="scss" scoped>
.left_box {
  width: 40%;
  height: 100%;
  display: flex;
  flex-direction: row-reverse;

  .code_box {
    margin: 10px;
    width: calc(100% - 220px);
    height: calc(100% - 20px);
    //border:1px solid #00ff00;
    background-color: #ffffff;
    color: #000;
    overflow-x: hidden;
    overflow-y: auto;
  }
}

#load4490_box {
  width: 60%;
  height: 100%;
}

.popup_box {
  position: fixed;
  left: calc(40% + 100px);
  width: 200px;
  top: 100px;
  height: 60px;
  z-index: 10;
}

.inner_content_common {
  margin-top: 10px;
  display: flex;
  justify-content: center;
  width: 50%;
}
</style>
